<template>
  <div class="liteflow-editor-properties-editor">
    <a-form
      layout="vertical"
      :model="formData"
      @valuesChange="handleChange"
    >
      <a-form-item label="ID">
        <a-input v-model="formData.id" allow-clear />
      </a-form-item>
      <a-form-item label="参数（data）">
        <a-input v-model="formData.data" allow-clear />
      </a-form-item>
      <a-form-item label="标签（tag）">
        <a-input v-model="formData.tag" allow-clear />
      </a-form-item>
      <a-form-item label="超时(maxWaitSeconds)">
        <a-input v-model="formData.maxWaitSeconds" allow-clear />
      </a-form-item>
    </a-form>
  </div>
</template>

<script>
import { debounce } from 'lodash';
import { history } from '../../core/history/index.js';

export default {
  name: 'ComponentPropertiesEditor',
  props: {
    model: {
      type: Object,
      required: true,
    },
  },
  data() {
    const properties = this.model.getProperties();
    return {
      formData: {
        id: this.model.id,
        ...properties,
      },
    };
  },
  watch: {
    model: {
      handler(newModel) {
        const properties = newModel.getProperties();
        this.formData = {
          id: newModel.id,
          ...properties,
        };
      },
      immediate: true,
    },
  },
  created() {
    this.handleChange = debounce(this._handleChange, 200);
  },
  methods: {
    _handleChange() {
      const { id, ...rest } = this.formData;
      
      // 更新模型
      this.model.id = id;
      this.model.setProperties({ ...this.model.getProperties(), ...rest });
      
      // 推送历史记录
      history.push(undefined, { silent: true });
      
      // 更新视图层节点标签
      const modelNode = this.model.getStartNode();
      if (modelNode) {
        const originSize = modelNode.getSize();
        modelNode
          .updateAttrs({ label: { text: id } })
          .setSize(originSize); // 解决由于文本修改导致的尺寸错误
      }
    },
  },
};
</script>

<style lang="less" scoped>
.liteflow-editor-properties-editor {
  padding: 16px;
}
</style>
